<template>
  <list-container @resize="resize">
    <template slot="form">
      <Form :model="queryParams" ref="queryParamsForm" :label-width="120">
        <Row :gutter="10">
          <Col span="6">
            <FormItem label="Audit Status" prop="isAudit">
              <Select
                placeholder="Select Audtit"
                clearable
                v-model="queryParams.isAudit"
              >
                <Option
                  v-for="item in audtitList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="Read Status" prop="readStatus">
              <Select
                clearable
                placeholder="Read Status"
                v-model="queryParams.readStatus"
              >
                <Option
                  v-for="item in readStatusList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <Button
              type="primary"
              @click="handleSearch"
              shape="circle"
              icon="ios-search"
              >Search</Button
            >
          </Col>
        </Row>
      </Form>
    </template>
    <template slot="table">
      <Table
        :loading="asyncLoading"
        :size="size"
        :columns="tableColumns"
        :data="tableData"
        :height="tableHeight"
      >
        <template slot-scope="{ row }" slot="action">
          <Button size="small" @click="handleAudti(row)">
            approved
          </Button>
        </template>
      </Table>
    </template>
    <template slot="pages">
      <div class="layout-list-pages">
        <Page
          :total="pageData.total"
          :page-size="pageData.pageSize"
          show-elevator
          show-total
          ref="listPages"
          show-sizer
          size="small"
          @on-change="onChangePage"
          @on-page-size-change="onPageSizeChange"
        />
      </div>
    </template>
  </list-container>
</template>
<script>
/**
 * 消息列表管理
 */
import { InitListPage } from "@m/ListMixins";
import { getDictionaryName, getDictionary } from "@/utils/common.js";
import { searchLeaveWords, isAuditStatus } from "@/api/leavewords.js";
export default {
  mixins: [InitListPage],

  data() {
    return {
      tableColumns: [
        {
          title: "Spokesman User",
          key: "spokesmanUser"
        },
        {
          title: "Project Title",
          key: "projectTitle"
        },
        {
          title: "Audit Status",
          key: "isAudit",
          render: (h, params) => {
            let rs = getDictionaryName("audtitList", params.row.isAudit);
            return h("span", rs.label);
          }
        },
        {
          title: "Read Status",
          key: "readStatus",
          render: (h, params) => {
            let rs = getDictionaryName("readStatusList", params.row.readStatus);
            return h("span", rs.label);
          }
        },
        {
          title: "Replay Status",
          key: "replayStatus"
        },
        {
          title: "Content",
          key: "replyContent",
          ellipsis: true,
          tooltip: true,
          width: 250
        },
        {
          title: "Action",
          slot: "action",
          width: 150,
          fixed: "right"
        }
      ],
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isAudit: "",
        readStatus: ""
      },
      asyncLoading: false,
      pageData: {
        total: 0,
        pageSize: 10
      },
      audtitList: getDictionary("audtitList"),
      readStatusList: getDictionary("readStatusList")
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      this.asyncLoading = true;
      searchLeaveWords(this.queryParams)
        .then(({ data }) => {
          this.tableData = data.list;
        })
        .catch(() => {})
        .finally(() => {
          this.asyncLoading = false;
        });
    },
    /**
     * 点击页码
     */
    onChangePage(page) {
      this.queryParams.pageNum = page;
      this.handleSearch();
    },
    /**
     * 切换条数
     */
    onPageSizeChange(size) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = size;
      this.handleSearch();
    },
    /**
     * 审核操作
     */
    handleAudti(item) {
      let params = {
        id: item.id,
        isAudit: item.isAudit !== 1 ? 2 : 1
      };
      this.$Modal.confirm({
        title: "Tips",
        content: "Whether it has been approved or not？",
        loading: true,
        okText: "confirm",
        cancelText: "cancel",
        onOk: () => {
          isAuditStatus(params)
            .then(() => {
              this.handleSearch();
              this.$Message.success("Success");
            })
            .finally(() => {
              this.$Modal.remove();
            });
        }
      });
    }
  }
};
</script>
